import React, { useEffect,useState } from 'react';
import { Form,
    Input, 
    Select,
    Drawer,
    Button,
    PageHeader,
    Divider,
    Row,
    Col,
    Checkbox,
    Tag,
    Table,
    Space,
    Tabs,
   } from 'antd';
  import moment from 'moment';
  import {getDictCode,getDictCodeLabel} from '@/utils/DataDictUtils';
  import { EditOutlined } from '@ant-design/icons';
  import '../index.less';

  const FormItem = Form.Item;
  const {TextArea} =  Input;
  const { Option } = Select;
  const dateFormat = 'YYYY-MM-DD';
  const { TabPane } = Tabs;

const ViewForm = props => {
    const { visible, current, onCancel } = props;
    const [regionData, setRegionData] = useState(null);
    const [friendlyName, setFriendlyName] = useState(null);
    useEffect(()=>{
      
      if(current && visible){
        setRegionData(current.region);
        setFriendlyName(current.friendlyName);
         
      }

    },[visible]);



    const columns = [
      {
        title: '功能',
        dataIndex: 'name',
      },
      {
        title: '主题',
        dataIndex: 'age',
      },
      {
        title: '操作',
        dataIndex: 'address',
      },
      {
        title: '描述',
        dataIndex: 'remark',
      },
    ];
    const data = [
      {
        key: '1',
        name: '属性上报',
        age: 'sys/723f1adde3f94916b276520876255e41/${deviceName}/thing/event/property/post',
        address: '发布',
        remark:'设备属性上报'
      },
      {
        key: '2',
        name: '属性设置',
        age: 'sys/723f1adde3f94916b276520876255e41/${deviceName}/thing/event/property/set',
        address: '订阅',
        remark:'设备属性设置'
      },
       
    ];


    const propColumns = [
      {
        title: '功能',
        dataIndex: 'name',
      },
      {
        title: '名称',
        dataIndex: 'age',
      },
      {
        title: '标识',
        dataIndex: 'address',
      },
      {
        title: '属性值',
        dataIndex: 'remark',
      },
    ];
    const propData = [
      {
        key: '1',
        name: '属性',
        age: '亮度',
        address: 'Brightness',
        remark:'58'
      },
      {
        key: '2',
        name: '属性',
        age: '开关',
        address: 'Switch',
        remark:'开'
      },
       
    ];

    return (
        <>
        <Drawer
          title="查看设备"
          width={720}
          onClose={onCancel}
          visible={visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={onCancel} style={{ marginRight: 8 }}>
                关闭
              </Button>
              
            </div>
          }
        >
        
        <div className='page-header-title'>设备基础信息:</div>
          <Form>
            <Row>
              <Col span={12}>
                <FormItem label='设备名称'  >
                    {current && current.deviceName? current.deviceName:''}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label='所属产品'  >
                    {current && current.productName}
                </FormItem>
              </Col>
          </Row>
          <Row>
            
              <Col span={12}>
                <FormItem label='设备ID'  >
                    {current && current.deviceId}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label='设备编码'  >
                {current && current.deviceSn}
                </FormItem>
              </Col>
          </Row>
          <Row>
             
          </Row>
          <Row>
          <Col span={24}>
        

          <Tabs  type="card">
                  <TabPane tab="设备信息" key="1">
                  <Row>
                  <Col span={8}>
                    <FormItem label='设备版本'  >
                        {current && current.version}
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem label='设备状态'  >
                        {current && current.status?getDictCodeLabel('deviceStatus',current.status):''}
                    </FormItem>
                  </Col>
                  <Col span={8}>
                    <FormItem label='验证方式'  >
                        {'密钥验证'}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                    <Col span={8}>
                      <FormItem label='数据格式'  >
                          {'JSON'}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label='添加时间'  >
                          {current ? moment().format(dateFormat):''}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label='上线时间'  >
                          {current ? moment().format(dateFormat):''}
                      </FormItem>
                    </Col>
                </Row>
                  </TabPane>
                  <TabPane tab="属性信息" key="3">
                    <Table columns={propColumns} dataSource={propData} size="small" />
                  </TabPane>
                  <TabPane tab="主题信息" key="2">
                    <Table columns={columns} dataSource={data} size="small" />
                  </TabPane>
              </Tabs>
            </Col>
          </Row>
          </Form>
        </Drawer>
        </>
    );
};

export default ViewForm;